<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<script src="js/axios.min.js"></script>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			
			
			<input type="text" v-model="name"> <input type="button" value="搜索" @click="search()">
			<br>
			<table class="table">
				<tr>
					<td></td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>商品重量</td>
					<td>商品数量</td>
					<td>创建时间</td>
					<td>操作</td>
				</tr>
				
				<tr v-for="(v,i) in goods">
					<td>{{v.id}}</td>
					<td>{{v.name}}</td>
					<td>{{v.price}}</td>
					<td>{{v.weight}}</td>
					<td>{{v.num}}</td>
					<td>{{v.times}}</td>
					<td><input type="button" value="删除" @click="del(v.id)"></td>
					<td></td>
				</tr>
			</table>
			
			<input type="button" value="首页" @click="getpage(1)">
			<input type="button" value="上一页" @click="getpage(page-1)">
			<input type="button" :value="i" v-for="i in sumpage" @click="getpage(i)">
			<input type="button" value="下一页" @click="getpage(page+1)">
			<input type="button" value="尾页" @click="getpage(sumpage)">
			
			
		</div>
	</body>
</html>
<script>
var app = new Vue({
	el:"#app",
	data:{
		goods:"",
		name:"",
		sumpage:"",
		page:"",
		size:"",
	
		
	},methods:{
		getpage(page){
			axios.get("http://127.0.0.1:8080/list?page="+page).then(function(res){
			
				app.goods=res.data.data.goods
				app.sumpage=res.data.data.sumpage
				app.page=res.data.data.page
			} )
		}, //分页
		del(id){
			axios.get("http://127.0.0.1:8080/del?id="+id).then(function(res){
			alert(res.data.msg)
				location.reload()
			} )
		}, //删除
	},created:function(){
		axios.get("http://127.0.0.1:8080/list").then(function(res){
			console.log(res.data.data)
			app.goods=res.data.data.goods
			app.sumpage=res.data.data.sumpage
			app.page=res.data.data.page
			
		} )
	}
})
</script>